<template>
	<div class="foot_wrap" :style="{ height: footerHeight + 'px' }">
		<img src="/img/bigScreen/017.png" alt="" class="close_foot" @click="closeFoot"/>
        <div class="echarts_wrap">
			<div class="model_title">
				<img src="/img/bigScreen/003.png" alt="" />
			</div>      
			<div class="model_echarts" id="model_echarts">
				<e-chart :options="option1" style='height: 200px;' class="e-chart"></e-chart>
			</div>			
        </div>
        
        <div class="echarts_wrap">
			<div class="model_title">
				<img src="/img/bigScreen/003.png" alt="" />
			</div>      
			<div class="model_echarts" id="model_echarts">
				<e-chart :options="option2" style='height: 200px;' class="e-chart"></e-chart>
			</div>			
        </div>     
        
        <div class="echarts_wrap">
			<div class="model_title">
				<img src="/img/bigScreen/003.png" alt="" />
			</div>      
			<div class="model_echarts" id="model_echarts">
				<e-chart :options="option3" style='height: 200px;' class="e-chart"></e-chart>
			</div>			
        </div> 
        
        <div class="echarts_wrap">
			<div class="model_title">
				<img src="/img/bigScreen/003.png" alt="" />
			</div>      
			<div class="model_echarts" id="model_echarts">
				<e-chart :options="option4" style='height: 200px;' class="e-chart"></e-chart>
			</div>			
        </div>         
	</div>
</template>

<script>
	import {templateOption,deepCopy} from '@/views/bigScreen/option/option'
	import bus from '@/util/bus'
	export default {
		name: '历史波动图',
		data() {
			return {
				option1: null,
				option2: null,
				option3: null,
				option4: null,				
				footerHeight:0
			}
		},
		mounted() {		
			this.init()
			bus.$on('showFoot', (e) => {
			    this.footerHeight=250
			})			
		},
		methods: {
			closeFoot(){
				this.footerHeight=0
				bus.$emit('hideFoot');  
			},
			// 假数据处理
			init() {
				// 深度克隆对象否则都是指向相同的内存
				this.option1=deepCopy(templateOption)
				this.option2=deepCopy(templateOption)
				this.option3=deepCopy(templateOption)
				this.option4=deepCopy(templateOption)
				
				this.option1.xAxis.data=["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
				this.option1.series[0].data=[55, 35, 62, 55, 97, 64, 44]
				this.option1.legend.data[0].name='温度'	
				this.option1.series[0].name='温度'
				
				this.option2.xAxis.data=["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
				this.option2.series[0].data=[0, 0, 0, 0, 0, 133, 0]
				this.option2.legend.data[0].name='压力'	
				this.option2.series[0].name='压力'
				
				this.option3.xAxis.data=["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
				this.option3.series[0].data=[ 0, 0, 0, 0, 0, 0, 377]
				this.option3.legend.data[0].name='液位'	
				this.option3.series[0].name='液位'				
				
				this.option4.xAxis.data=["周一", "周二", "周三", "周四", "周五", "周六", "周日"]
				this.option4.series[0].data=[55, 135, 0, 0, 0, 233, 277]
				this.option4.legend.data[0].name='次数'	
				this.option4.series[0].name='次数'
				this.option4.series[0].smooth=false
				
			}
		}
	}
</script>

<style lang="scss" scoped="">
	* {
		box-sizing: border-box;
	}	
	.foot_wrap {
       position: absolute;       
       transition: height 0.5s;
       width: 75%;
       z-index: 1000;
       bottom: 0;
       left: 25%;       
       display: flex;
       .echarts_wrap{flex: 1;background: rgba(45, 103, 146, .3);height: 100%;margin-left: 10px;display: flex;flex-direction: column;
			.model_title {
				img {
					width: 100%;
					display: block;
				}
			}		
			.model_echarts {
				padding: 10px;
				background: rgba(45,103,146,.3);
				flex: 1;
				.e-chart{background: rgba(20,40,78,.84);}
			}	              
       }
       .close_foot{position: absolute;right: 0;width: 20px;height: 20px;top: 0;}
	}
</style>